/** 
 * @class Ext.grid.PropertyRecord 
 * @modifier: DSONet (dsonet@msn.com) 
 * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the 
 * {@link Ext.grid.PropertyGrid}.  Typically, PropertyRecords do not need to be created directly as they can be 
 * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source} 
 * config property or by calling {@link Ext.grid.PropertyGrid#setSource}.  However, if the need arises, these records 
 * can also be created explicitly as shwon below.  Example usage: 
 * <pre><code> 
var rec = new Ext.grid.PropertyRecord({ 
    name: 'Birthday', 
    value: new Date(Date.parse('05/26/1972')) 
}); 
// Add record to an already populated grid 
grid.ds.addSorted(rec); 
</code></pre> 
 * @constructor 
 * @param {Object} config A data object in the format: {name: [name], value: [value]}.  The specified value's type 
 * will be read automatically by the grid to determine the type of editor to use when displaying it. 
 */ 
Ext.grid.PropertyRecord = Ext.data.Record.create([ 
    {name:'name',type:'string'}, 'value', "field" 
]); 
/** 
 * @class Ext.grid.PropertyStore 
 * @extends Ext.util.Observable 
 * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping 
 * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format 
 * required for compatibility with the underlying store. Generally this class should not need to be used directly -- 
 * the grid's data should be accessed from the underlying store via the {@link #store} property. 
 * @constructor 
 * @param {Ext.grid.Grid} grid The grid this store will be bound to 
 * @param {Object} source The source data config object 
 */ 
Ext.grid.PropertyStore = function(grid, source){ 
    this.grid = grid; 
    this.store = new Ext.data.Store({ 
        recordType : Ext.grid.PropertyRecord 
    }); 
    this.store.on('update', this.onUpdate,  this); 
    this.setSource(source); 
    Ext.grid.PropertyStore.superclass.constructor.call(this); 
}; 
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, { 
    // protected - should only be called by the grid.  Use grid.setSource instead. 
    setSource : function(o, fields){ 
        this.source = o; 
        this.store.removeAll(); 
        var data = [], l; 
        if (fields && (l = fields.length)) 
        { 
            var i = -1, k, n; 
            while (++i < l) 
            { 

                k = fields[i]; 

                if (typeof (k) == 'object' && (n = k.dataIndex || k.id) && this.isEditableValue(o[n])) 
                { 
                    /*if(k.header) 
                        this.grid.propertyNames[n] = k.header; 
                    if(k.editor) 
                        this.grid.customEditors[n] = k.editor;*/ 

                    data.push(new Ext.grid.PropertyRecord( 
                    { 
                        name: n, 
                        value: o[n], 
                        field: k 
                    }, k.id || k.dataIndex)); 
                } 
            } 
        } 
        else 
        { 
            for (var k in o) 
            { 
                if (this.isEditableValue(o[k])) 
                { 
                    data.push(new Ext.grid.PropertyRecord( 
                    { 
                        name: k, 
                        value: o[k] 
                    }, k)); 
                } 
            } 
        } 
        this.store.loadRecords({records: data}, {}, true); 
    }, 
    // private 
    onUpdate : function(ds, record, type){ 
        if(type == Ext.data.Record.EDIT){ 
            var v = record.data['value']; 
            var oldValue = record.modified['value']; 
            if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){ 
                this.source[record.id] = v; 
                record.commit(); 
                this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue); 
            }else{ 
                record.reject(); 
            } 
        } 
    }, 
    // private 
    getProperty : function(row){ 
       return this.store.getAt(row); 
    }, 
    // private 
    isEditableValue: function(val){ 
        if(Ext.isDate(val)){ 
            return true; 
        }else if(typeof val == 'object' || typeof val == 'function'){ 
            return false; 
        } 
        return true; 
    }, 
    // private 
    setValue : function(prop, value){ 
        this.source[prop] = value; 
        this.store.getById(prop).set('value', value); 
    }, 
    // protected - should only be called by the grid.  Use grid.getSource instead. 
    getSource : function(){ 
        return this.source; 
    } 
}); 
/** 
 * @class Ext.grid.PropertyColumnModel 
 * @extends Ext.grid.ColumnModel 
 * A custom column model for the {@link Ext.grid.PropertyGrid}.  Generally it should not need to be used directly. 
 * @constructor 
 * @param {Ext.grid.Grid} grid The grid this store will be bound to 
 * @param {Object} source The source data config object 
 */ 
Ext.grid.PropertyColumnModel = function(grid, store){ 
    this.grid = grid; 
    var g = Ext.grid; 
    g.PropertyColumnModel.superclass.constructor.call(this, [ 
        {header: '属性', width: grid.nameWidth, sortable: false, dataIndex: 'name', id: 'name', menuDisabled: true}, 
        {header: '值', width: grid.valueWidth, resizable: false, dataIndex: 'value', id: 'value', menuDisabled: true} 
    ]); 
    this.store = store; 
    this.bselect = Ext.DomHelper.append(document.body, { 
        tag: 'select', cls: 'x-grid-editor x-hide-display', children: [ 
            {tag: 'option', value: 'true', html: 'true'}, 
            {tag: 'option', value: 'false', html: 'false'} 
        ] 
    }); 
    var f = Ext.form; 
    var bfield = new f.Field({ 
        el:this.bselect, 
        bselect : this.bselect, 
        autoShow: true, 
        getValue : function(){ 
            return this.bselect.value == 'true'; 
        } 
    }); 
    this.editors = { 
        'date' : new f.DateField({selectOnFocus:true}), 
        'string' : new f.TextField({selectOnFocus:true}), 
        'number' : new f.NumberField({selectOnFocus:true}), 
        'boolean' : bfield 
    }; 
    this.renderCellDelegate = this.renderCell.createDelegate(this); 
    this.renderPropDelegate = this.renderProp.createDelegate(this); 
}; 
Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, { 
    // private - strings used for locale support 
//    nameText : 'Name', 
//    valueText : 'Value', 
    dateFormat : 'm/j/Y', 
    // private 
    renderDate : function(dateVal){ 
        return dateVal.dateFormat(this.dateFormat); 
    }, 
    // private 
    renderBool : function(bVal){ 
        return bVal ? 'true' : 'false'; 
    }, 
    // private 
    isCellEditable : function(colIndex, rowIndex){ 
        var p = this.store.getProperty(rowIndex); 
        if (p.data.field && p.data.field.editable == false) 
        { 
            return false; 
        } 
        return colIndex == 1; 
    }, 
    // private 
    getRenderer : function(col){ 
        return col == 1 ? 
            this.renderCellDelegate : this.renderPropDelegate; 
    }, 
    // private 
    renderProp : function(v, metadata, record){ 
        var ref; 
        if ((ref = record.data.field) && typeof (ref.header) != 'undefined') 
        { 
            return ref.header; 
        } 
        var pn = this.grid.propertyNames; 
        return pn && pn[v] ? pn[v] : v; 
        //return this.getPropertyName(v); 
    }, 
    // private 
    renderCell : function(val, metadata, record){//, rowIndex, colIndex, store 
        var ref; 
        if ((ref = record.data.field) && typeof (ref.renderer) == 'function') 
        { 
            return ref.renderer.apply(this, arguments); 
        } 
        var rv = val; 
        if(Ext.isDate(val)){ 
            rv = this.renderDate(val); 
        }else if(typeof val == 'boolean'){ 
            rv = this.renderBool(val); 
        } 
        return Ext.util.Format.htmlEncode(rv); 
    }, 
    // private 
    /*getPropertyName : function(name){ 
        var pn = this.grid.propertyNames; 
        return pn && pn[name] ? pn[name] : name; 
    },*/ 
    // private 
    getCellEditor : function(colIndex, rowIndex){
    	var ed = null;
        var p = this.store.getProperty(rowIndex); 
        var n = p.data['name'], val = p.data['value'];
        if (p.data.field && typeof (p.data.field.editor) == 'object') 
        { 
            ed = p.data.field.editor; 
        }else if(this.grid.customEditors[n]){ 
            ed = this.grid.customEditors[n]; 
        }
        if(!ed){
        	var t = p.data.field.type;
        	if(t){
        		ed = this.editors[t];
        	}
        	if(!ed){
		        if(Ext.isDate(val)){ 
		            t = "date"; 
		        }else { 
		            var vt = typeof val;
		            switch(vt) 
		            { 
		                case "number": 
		                	t = vt;
		                	break;
		                case "boolean":
		                    t = vt;
		                    break; 
		                default: 
		                    t = "string"; 
		            } 
		        } 
		        ed = this.editors[t];
        	}
        }
        
        //对ed处理，需要和EditorGrid中的Ed一样
        if(ed){
            if(!ed.gridEditor){
                ed.gridEditor = new Ext.grid.GridEditor(ed);
            }
            ed = ed.gridEditor;
        }
        return ed;
    } 
}); 
/** 
 * @class Ext.grid.PropertyGrid 
 * @extends Ext.grid.EditorGridPanel 
 * A specialized grid implementation intended to mimic the traditional property grid as typically seen in 
 * development IDEs.  Each row in the grid represents a property of some object, and the data is stored 
 * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s.  Example usage: 
 * <pre><code> 
var grid = new Ext.grid.PropertyGrid({ 
    title: 'Properties Grid', 
    autoHeight: true, 
    width: 300, 
    renderTo: 'grid-ct', 
    source: { 
        "(name)": "My Object", 
        "Created": new Date(Date.parse('10/15/2006')), 
        "Available": false, 
        "Version": .01, 
        "Description": "A test object" 
    } 
}); 
</pre></code> 
 * @constructor 
 * @param {Object} config The grid config object 
 */ 
var PropertyGrid = Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
    /** 
    * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details). 
    */ 
    /** 
    * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow 
    * the grid to support additional types of editable fields.  By default, the grid supports strongly-typed editing 
    * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and 
    * associated with a custom input control by specifying a custom editor.  The name of the editor 
    * type should correspond with the name of the property that will use the editor.  Example usage: 
    * <pre><code> 
var grid = new Ext.grid.PropertyGrid({ 
    ... 
    customEditors: { 
        'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true})) 
    }, 
    source: { 
        'Start Time': '10:00 AM' 
    } 
}); 
</code></pre> 
    */ 
    // private config overrides 
    enableColumnMove:false, 
    stripeRows:false, 
    trackMouseOver: false, 
    clicksToEdit:1, 
    enableHdMenu : false, 
    editable: true, 
    nameWidth: 50, 
    valueWidth: 50, 
    autoExpandColumn: 'value', 
    viewConfig : { 
        forceFit:true 
    }, 
    // private 
    initComponent : function(){ 
        this.propertyNames = this.propertyNames || {}; 
        this.customEditors = this.customEditors || {}; 
        this.lastEditRow = null; 
        var store = new Ext.grid.PropertyStore(this); 
        this.propStore = store; 
        var cm = new Ext.grid.PropertyColumnModel(this, store); 
        //this.addEvents( 
            /** 
             * @event beforepropertychange 
             * Fires before a property value changes.  Handlers can return false to cancel the property change 
             * (this will internally call {@link Ext.data.Record#reject} on the property's record). 
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in 
             * as the {@link #source} config property). 
             * @param {String} recordId The record's id in the data store 
             * @param {Mixed} value The current edited property value 
             * @param {Mixed} oldValue The original property value prior to editing 
             */ 
            //'beforepropertychange', 
            /** 
             * @event propertychange 
             * Fires after a property value has changed. 
             * @param {Object} source The source data object for the grid (corresponds to the same object passed in 
             * as the {@link #source} config property). 
             * @param {String} recordId The record's id in the data store 
             * @param {Mixed} value The current edited property value 
             * @param {Mixed} oldValue The original property value prior to editing 
             */ 
            //'propertychange' 
        //); 
        this.cm = cm; 
        this.ds = store.store; 
        PropertyGrid.superclass.initComponent.call(this); 
        this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){ 
            if(colIndex === 0){ 
                this.startEditing.defer(200, this, [rowIndex, 1]); 
                return false; 
            } 
        }, this); 
        if (!this.editable) 
        { 
            this.on('beforeedit', Ext.falseFn); 
        } 
    }, 
    // private 
    onRender : function(){ 
        PropertyGrid.superclass.onRender.apply(this, arguments); 
        this.getGridEl().addClass('x-props-grid'); 
    }, 
    // private 
    afterRender: function(){ 
        PropertyGrid.superclass.afterRender.apply(this, arguments); 
        this.setSource(this.source, this.fields); 
    }, 
    /** 
     * Sets the source data object containing the property data.  The data object can contain one or more name/value 
     * pairs representing all of the properties of an object to display in the grid, and this data will automatically 
     * be loaded into the grid's {@link #store}.  The values should be supplied in the proper data type if needed, 
     * otherwise string type will be assumed.  If the grid already contains data, this method will replace any 
     * existing data.  See also the {@link #source} config value.  Example usage: 
     * <pre><code> 
grid.setSource({ 
    "(name)": "My Object", 
    "Created": new Date(Date.parse('10/15/2006')),  // date type 
    "Available": false,  // boolean type 
    "Version": .01,      // decimal type 
    "Description": "A test object" 
}); 
</code></pre> 
     * @param {Object} source The data object 
     */ 
    setSource : function(source, fields){
    	if(!source){
    		source = {};
    		for(var i=0;i<fields.length;i++){
    			source[fields[i].id || fields[i].dataIndex] = '';
    		}
    		this.source = source;
    	}
        this.propStore.setSource(source, fields); 
    }, 
    /** 
     * Gets the source data object containing the property data.  See {@link #setSource} for details regarding the 
     * format of the data object. 
     * @return {Object} The data object 
     */ 
    getSource : function(){ 
        return this.propStore.getSource(); 
    },
    setValue : function(prop, value){ 
        this.source[prop] = value; 
        this.store.getById(prop).set('value', value); 
    }    
}); 
Ext.reg("propertygrid", PropertyGrid);  